<template>
  <div class="element-form-page">
    <div class="form-container">
      <div class="form-header">
        <h1 class="form-title">Element Plus 表单测试</h1>
        <p class="form-description">这里展示了 Element Plus 组件库的各种表单组件，包括输入框、选择器、日期选择器等。</p>
      </div>

      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="demo-form" size="large">
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱地址" type="email" clearable />
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入手机号码" clearable />
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio value="male"> 男 </el-radio>
              <el-radio value="female"> 女 </el-radio>
              <el-radio value="other"> 其他 </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 详细信息 -->
        <div class="form-section">
          <h3 class="section-title">详细信息</h3>

          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker v-model="formData.birthDate" type="date" placeholder="选择日期" style="width: 100%" />
          </el-form-item>

          <el-form-item label="所在城市" prop="city">
            <el-select v-model="formData.city" placeholder="请选择城市" style="width: 100%" clearable>
              <el-option v-for="city in cityOptions" :key="city.value" :label="city.label" :value="city.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="兴趣爱好" prop="hobbies">
            <el-checkbox-group v-model="formData.hobbies">
              <el-checkbox value="reading"> 阅读 </el-checkbox>
              <el-checkbox value="music"> 音乐 </el-checkbox>
              <el-checkbox value="sports"> 运动 </el-checkbox>
              <el-checkbox value="travel"> 旅行 </el-checkbox>
              <el-checkbox value="coding"> 编程 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="技能等级" prop="skillLevel">
            <el-slider v-model="formData.skillLevel" :min="0" :max="100" show-stops :step="10" show-input />
          </el-form-item>

          <el-form-item label="是否同意" prop="agree">
            <el-switch v-model="formData.agree" active-text="同意" inactive-text="不同意" />
          </el-form-item>

          <el-form-item label="个人简介" prop="bio">
            <el-input
              v-model="formData.bio"
              type="textarea"
              :rows="4"
              placeholder="请输入个人简介"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 表单操作 -->
        <el-form-item class="form-actions">
          <el-button type="primary" :loading="loading" @click="handleSubmit">
            {{ localeStore.t('common.submit') }}
          </el-button>
          <el-button @click="handleReset">
            {{ localeStore.t('common.reset') }}
          </el-button>
          <el-button type="info" @click="handlePreview">
            {{ localeStore.t('common.preview') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据预览对话框 -->
    <el-dialog v-model="previewVisible" title="表单数据预览" width="600px" :before-close="handleClosePreview">
      <div class="preview-content">
        <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
      </div>
      <template #footer>
        <el-button @click="previewVisible = false"> 关闭 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useLocaleStore } from '@/stores/locale';

const localeStore = useLocaleStore();

// 表单引用
const formRef = ref<FormInstance>();

// 表单数据
const formData = reactive({
  name: '',
  email: '',
  phone: '',
  gender: '',
  birthDate: '',
  city: '',
  hobbies: [] as string[],
  skillLevel: 50,
  agree: false,
  bio: '',
});

// 表单验证规则
const formRules: FormRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  city: [{ required: true, message: '请选择所在城市', trigger: 'change' }],
  agree: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请同意相关条款'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    },
  ],
};

// 城市选项
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' },
  { label: '成都', value: 'chengdu' },
  { label: '西安', value: 'xian' },
  { label: '武汉', value: 'wuhan' },
];

// 状态管理
const loading = ref(false);
const previewVisible = ref(false);

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;

    // 模拟提交请求
    window.setTimeout(() => {
      loading.value = false;
      ElMessage.success('表单提交成功！');
      console.log('提交的数据:', formData);
    }, 2000);
  } catch {
    ElMessage.error('请检查表单填写是否正确');
  }
};

// 重置表单
const handleReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  ElMessage.info('表单已重置');
};

// 预览数据
const handlePreview = () => {
  previewVisible.value = true;
};

// 关闭预览
const handleClosePreview = () => {
  previewVisible.value = false;
};
</script>

<style scoped></style>
